<!-- 商品列表 -->
<template>
  <van-grid :column-num="2" :gutter="10" :center="false" :border="false">
    <van-grid-item 
      v-for="item in productsList" 
      :key="item.id"
      :to="{
        name: 'Product',
        params: {
          productId: item.id
        }
      }"
    >
      <van-image
        :src="item.image"
        height="165px"
        width="100%"
        class="imgStyle"
      ></van-image>
      <div class="productDetail">
        <p class="title">
          {{item.store_name}}
        </p>
        <p class="price">¥ {{item.price}}</p>
        <p class="sale">已售{{item.sales}}件</p>
      </div>
    </van-grid-item>
  </van-grid>
</template>

<script setup>
const { productsList } = defineProps({
  productsList: {
    type: Array,
    required: true,
  },
});
</script>

<style lang="scss" scoped>
:deep(.van-grid-item__content) {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}
.productDetail {
  margin-bottom: 5px;
  .title {
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 5px;
  }
  .price {
    color: #ee3e3e;
    font-size: 22px;
    padding-left: 6px;
  }
  .sale {
    font-size: 14px;
    color: #ccc;
    padding-left: 8px;
  }
}
</style>